<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="format-detection"
	content="telephone=no,email=no,date=no,address=no">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<style type="text/css">
.aui-col-xs-4 p {
	width: 40px !important;
	height: 40px !important;
}

.aui-col-xs-4 p {
	width: 42px;
	height: 42px;
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	display: box;
	box-orient: horizontal;
	box-pack: center;
	box-align: center;
	/* border-radius: 10px; */
	-webkit-border-radius: 20px;
	margin: 0 auto;
}

.aui-bg-ffc74e {
	background: #ffc74e;
}

.aui-col-xs-4 p i {
	color: #fff !important;
	font-size: 20px !important;
}
</style>
<c:set var="m43" value="false"></c:set>
<c:set var="m42" value="false"></c:set>
<script type="text/javascript">
var _menu=[];
(function() {
<c:forEach items="${menu}" var="item">
	var item={id:${item.id}, name:"${item.name}", isStart:"${item.isStart}", childMenus:[]};
	<c:forEach items="${item.childMenus }" var="subItem">
		var subItem={id:${item.id}, name:"${item.name}", isStart:"${item.isStart}"};
		item.childMenus.push(subItem);
	</c:forEach>
	_menu.push(item);
</c:forEach>
})();
</script>
</head>
<body>
		<div class="aui-content aui-margin-b-15">
			<form id="myFrom" >
				<ul class="aui-list aui-form-list">
					<li class="aui-list-item">
						<div class="aui-list-item-inner">
							<div class="aui-list-item-label" >
								目标周期:
							</div>
							<div class="aui-list-item-input">
								<select name="customerType"  id="customerType" onchange="loadFunction();" >
									<option value="thisMonth">本月</option>
									<option value="lastMonth">上月</option>
									<option value="thisYear">本年</option>
									<option value="1">第一季度</option>
									<option value="2">第二季度</option>
									<option value="3">第三季度</option>
									<option value="4">第四季度</option>
								</select>
								<i class="aui-iconfont aui-icon-down" style="position:absolute;top: 10px;right: 10px;" ></i>
							</div>
						</div>
					</li>
				</ul>
			</form>
		</div>
		<div class="aui-content aui-margin-b-15" id="sales" >
			<p style="width: 100%;font-size:18px;color:#212121; font-weight: 700;" align="center" >
				部门销售排名
			</p>
			<table  style="width: 100%;text-align: center;font-size: 12px;" id="deptSalesRanking"  >
				<tr >
					<th style="width: 20%" >排序</th>
					<th style="width: 40%">名称</th>
					<th style="width: 40%">销售额</th>
				</tr>
			</table>
			<hr style="height: 1px;width: 100%;background-color: #D4D4D4;" />
		</div>
		<div class="aui-content aui-margin-b-15" id="salesfunnel" >
			<p style="width: 100%;font-size:18px;color:#212121; font-weight: 700;" align="center" >
				团队销售排名
			</p>
			<table  style="width: 100%;text-align: center;font-size: 12px;" id="teamSalesRanking"  >
				<tr >
					<th style="width: 20%" >排序</th>
					<th style="width: 40%">名称</th>
					<th style="width: 40%">销售额</th>
				</tr>
			</table>
			<hr style="height: 1px;width: 100%;background-color: #D4D4D4;" />
			<!--<div id="teamSalesRanking" style="width: 100%;height:400px;"></div>-->
		</div>
		<div class="aui-content aui-margin-b-15" id="visit">
			<div id="deptSalesPerformance" style="width: 100%;height:400px;"></div>
		</div>
		<div class="aui-content aui-margin-b-15" id="email" >
			<ul class="aui-list aui-form-list">
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label" >
							所属部门:
						</div>
						<div class="aui-list-item-input">
							<select id="deptPersonal" onchange="personalSellingFunction();" >
								<option value="0" >-请选择-</option>
							</select>
							<i class="aui-iconfont aui-icon-down" style="position:absolute;top: 10px;right: 10px;" ></i>
						</div>
					</div>
				</li>
			</ul>
			<div id="personalSelling"style="width: 100%;height:400px;"></div>
			<hr style="height: 1px;width: 100%;background-color: #D4D4D4;" />
		</div>
		<div class="aui-content aui-margin-b-15">
			<div id="deptIncrease" style="width: 100%;height:400px;"></div>
			<hr style="height: 1px;width: 100%;background-color: #D4D4D4;" />
		</div>
		<div class="aui-content aui-margin-b-15">
			<ul class="aui-list aui-form-list">
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label" >
							所属部门:
						</div>
						<div class="aui-list-item-input">
							<select id="ccc" onchange="teamIncreaseFunction()" >
								<option value="0" >-请选择-</option>
							</select>
							<i class="aui-iconfont aui-icon-down" style="position:absolute;top: 10px;right: 10px;" ></i>
						</div>
					</div>
				</li>
			</ul>
			<div id="teamIncrease" style="width: 100%;height:400px;"></div>
		</div>
		<div class="aui-toast"  style="display:none;" id="loading">
			<div class="spinner aui-toast-content">
				<div class="spinner-container container1">
					<div class="circle1"></div>
					<div class="circle2"></div>
					<div class="circle3"></div>
					<div class="circle4"></div>
				</div>
				<div class="spinner-container container2">
					<div class="circle1"></div>
					<div class="circle2"></div>
					<div class="circle3"></div>
					<div class="circle4"></div>
				</div>
				<div class="spinner-container container3">
					<div class="circle1"></div>
					<div class="circle2"></div>
					<div class="circle3"></div>
					<div class="circle4"></div>
				</div>
			</div>
		</div>
		
		
		<div style="width:100%;height:2.5rem;"></div>

</body>
 <script type="text/javascript" src="../js/jquery.min.js"></script>
<!-- <script type="text/javascript" src="../js/script/aui-tab.js"></script> -->
<!-- <script type="text/javascript" src="../js/script/api.js"></script> -->
<!-- <script type="text/javascript" src="../js/zepto.min.js"></script> -->
<!-- <script type="text/javascript" src="../js/script/config.js"></script> -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
<!-- <script type="text/javascript" src="../js/script/aui-dialog.js" ></script> -->
<%-- <script  type="text/javascript" src="${pageContext.request.contextPath}/js/rolling.js"></script>
 --%>
 <script type="text/javascript">
	var host = '${pageContext.request.contextPath}/';
	//var user = '${users}';
	
	$(function() {
		/* alert("${users.dept.deptId}");
		alert(_menu); */
		loadMenu();
		loadFunction();
	});
	
	
	function loadMenu() {
		
		var menu = _menu;
		//alert(menu.length);
		
		for (var i = 0; i < menu.length; i++) {
				for (var j = 0; j < menu[i].childMenus.length; j++) {
					if (menu[i].childMenus[j].id != 43 && menu[i].childMenus[j].isStart != 1) {
						$("#visit").css("display", "none");
						$("#salesfunnel").css("display", "none");
					}
					if (menu[i].childMenus[j].id != 42 && menu[i].childMenus[j].isStart != 1) {
						$("#sales").css("display", "none");
						$("#email").css("display", "none");
					}
				}
			}
		
		 
		$.ajax({
				url : host + 'getDeptIdGainBranchList.do',
				type : 'post',
				data : {
						"deptId" : "${users.dept.deptId}"
				},
				dataType : 'json',
			success : function(data) {
					var ret = data;
					if (ret.code == 1) {
					var html = "";
					for (var i = 0; i < ret.data.length; i++) {
						html += "<option  value='" + ret.data[i].branchId + "'>" + ret.data[i].branchName + "</option>";
					}
					$("#deptPersonal").append(html);
					$("#ccc").append(html);
					} else {
					
					}
				}
			});
		
	}
	
	
	function loadFunction() {
			//$("#loading").show();
			deptSalesPerformanceFunction();
		 	teamSalesRankingFunction();
			deptSalesRankingFunction();
			deptIncreaseFunction();
			teamIncreaseFunction();
			personalSellingFunction(); 
			//$("#loading").hide();
	}

	// 基于准备好的dom，初始化echarts实例 部门销售业绩
		var deptSalesPerformance = echarts.init(document.getElementById('deptSalesPerformance'));
		// 指定图表的配置项和数据
		var deptSalesPerformanceOption = {
			title : {
				text : '部门销售业绩 ',
				subtext : '数据统计',
				x : 'center'
			},
			tooltip : {
				trigger : 'item',
				formatter : "{a} <br/>{b} : {c} ({d}%)"
			},
			legend : {
				orient : 'vertical',
				left : 'left',
				data : ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
			},
			series : [{
				name : '销售业绩',
				type : 'pie',
				radius : '55%',
				center : ['50%', '60%'],
				data : [{
					value : 335,
					name : '直接访问'
				}, {
					value : 310,
					name : '邮件营销'
				}, {
					value : 234,
					name : '联盟广告'
				}, {
					value : 135,
					name : '视频广告'
				}, {
					value : 1548,
					name : '搜索引擎'
				}],
				itemStyle : {
					emphasis : {
						shadowBlur : 10,
						shadowOffsetX : 0,
						shadowColor : 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		};
		
		// 使用刚指定的配置项和数据显示图表。
		deptSalesPerformance.setOption(deptSalesPerformanceOption);
		function deptSalesPerformanceFunction() {
			var oper = $("#customerType").val();
			if (oper == null) {
				oper = 'thisMonth';
			}
			$.ajax({
				url : host + 'saleChart.do',
				type : 'post',
				data : {
						"method" : "dept",
						"deptId" : "${users.dept.deptId}",
						"date" : oper
				},
				dataType : 'json',
			success : function(data) {
				if (data.code != null) {
					deptSalesPerformance.setOption({
						legend : {
							data : data.dept
						},
						series : [{
							// 根据名字对应到相应的系列
							data : data.data
						}]
					});
				}else{	
					deptSalesPerformance.setOption({
						title : {
							subtext : '暂无数据',
						},
						legend : {
							data : [""]
						},
						series : [{
							// 根据名字对应到相应的系列
							data : [{}]
						}]
					});
				
					}
				}
			});
		}
		
		
		function teamSalesRankingFunction(oper) {
			var oper = $("#customerType").val();
			if (oper == null) {
				oper = 'thisMonth';
			}
			$.ajax({
				url : host + 'saleChart.do',
				type : 'post',
				data : {
						"method" : "branch",
						"date" : oper
				},
				dataType : 'json',
			success : function(data) {
					var ret = data;
					if (data.data != null) { 
						for (var i = 0; i < ret.data.length; i++) {
							var trHTML = "<tr><td>" + (i + 1) + "</td><td>" + ret.data[i].name + "</td><td>" + ret.data[i].value + " 元</td></tr>";
							$("#teamSalesRanking").append(trHTML);
							//在table最后面添加一行
						}
					} else {
						$("#teamSalesRanking").append("<td colspan=\"3\" align=\"center\" style=\"font-size:10px;\" >暂时没有数据！</td></tr>");
					}
				}
			});
		}


		
		// 使用刚指定的配置项和数据显示图表。
		function deptSalesRankingFunction() {
			var oper = $("#customerType").val();
			if (oper == null) {
				oper = 'thisMonth';
			}
			$.ajax({
				url : host + 'rankSaleChart.do',
				type : 'post',
				data : {
						"deptOption" : "${users.dept.deptId}",
						"date" : oper
				},
				dataType : 'json',
				success : function(data) {
				if (data.data != null) {
					var ret = data;
					for (var i = 0; i < ret.data.length; i++) {
						var trHTML = "<tr><td>" + (i + 1) + "</td><td>" + ret.data[i].name + "</td><td>" + ret.data[i].value + " 元</td></tr>";
						$("#deptSalesRanking").append(trHTML);
						//在table最后面添加一行
					}
					} else {
					$("#deptSalesRanking").append("<td colspan=\"3\" align=\"center\" style=\"font-size:10px;\" >暂时没有数据！</td></tr>");
					//在table最后面添加一行
					}
				}
			});
		}

		// 基于准备好的dom，初始化echarts实例 部门客户增长
		var deptIncrease = echarts.init(document.getElementById('deptIncrease'));
		// 指定图表的配置项和数据
		var deptIncreaseOption = {
			title : {
				text : '部门客户增长',
				subtext : '数据统计',
				x : 'center'
			},
			tooltip : {
				trigger : 'item',
				formatter : "{a} <br/>{b} : {c} ({d}%)"
			},
			legend : {
				orient : 'vertical',
				left : 'left',
				data : ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
			},
			series : [{
				name : '销售业绩',
				type : 'pie',
				radius : '55%',
				center : ['50%', '60%'],
				data : [{
					value : 335,
					name : '直接访问'
				}, {
					value : 310,
					name : '邮件营销'
				}, {
					value : 234,
					name : '联盟广告'
				}, {
					value : 135,
					name : '视频广告'
				}, {
					value : 1548,
					name : '搜索引擎'
				}],
				itemStyle : {
					emphasis : {
						shadowBlur : 10,
						shadowOffsetX : 0,
						shadowColor : 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		};
		// 使用刚指定的配置项和数据显示图表。
		deptIncrease.setOption(deptIncreaseOption);
		function deptIncreaseFunction() {
			var oper = $("#customerType").val();
			if (oper == null) {
				oper = 'nowMonth';
			}
			$.ajax({
				url : host + 'customerCharts.do',
				type : 'post',
				data : {
						"deptId" : "${users.dept.deptId}",
						"type" : "dept",
						"dateType" : oper
				},
				dataType : 'json',
			success : function(data) {
					var ret = data;
					if (ret.datas != null) {
						deptIncrease.setOption({
							title : {
								subtext : '总增长量：' + ret.customerCount + '个'
							},
							legend : {
								data : ret.dept
							},
							series : [{
								// 根据名字对应到相应的系列
								data : ret.datas
							}]
						});
					}
				}
			});
		}

		// 基于准备好的dom，初始化echarts实例  团队客户增长
		var teamIncrease = echarts.init(document.getElementById('teamIncrease'));
		// 指定图表的配置项和数据
		var teamIncreaseOption = {
			title : {
				text : '团队客户增长 ',
				subtext : '数据统计',
				x : 'center'
			},
			tooltip : {
				trigger : 'item',
				formatter : "{a} <br/>{b} : {c} ({d}%)"
			},
			legend : {
				orient : 'vertical',
				left : 'left',
				data : ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
			},
			series : [{
				name : '销售业绩',
				type : 'pie',
				radius : '55%',
				center : ['50%', '60%'],
				data : [{
					value : 335,
					name : '直接访问'
				}, {
					value : 310,
					name : '邮件营销'
				}, {
					value : 234,
					name : '联盟广告'
				}, {
					value : 135,
					name : '视频广告'
				}, {
					value : 1548,
					name : '搜索引擎'
				}],
				itemStyle : {
					emphasis : {
						shadowBlur : 10,
						shadowOffsetX : 0,
						shadowColor : 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		};
		// 使用刚指定的配置项和数据显示图表。
		teamIncrease.setOption(teamIncreaseOption);
		function teamIncreaseFunction() {
			var oper = $("#customerType").val();
			var deptCustomer = $("#ccc").val();
			if (oper == null) {
				oper = 'nowMonth';
			}
			$.ajax({
				url : host + 'customerCharts.do',
				type : 'post',
				data : {
						"deptId" : "${users.dept.deptId}",
						"type" : "branch",
						"branchId" : deptCustomer,
						"dateType" : oper
				},
				dataType : 'json',
			success : function(data) {
					var ret = data;
					if (ret.data != null) {
						teamIncrease.setOption({
							title : {
								subtext : '总增长量：' + ret.customerCount + '个'
							},
							legend : {
								data : ret.dept
							},
							series : [{
								// 根据名字对应到相应的系列
								data : ret.datas
							}]
						});
					}
				}
			});
		}

		// 基于准备好的dom，初始化echarts实例 个人销售排名
		var personalSelling = echarts.init(document.getElementById('personalSelling'));
		// 指定图表的配置项和数据
		var personalSellingOption = {
			title : {
				text : '团队销售业绩 ',
				subtext : '数据统计',
				x : 'center'
			},
			tooltip : {
				trigger : 'item',
				formatter : "{a} <br/>{b} : {c} ({d}%)"
			},
			legend : {
				orient : 'vertical',
				left : 'left',
				data : ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
			},
			series : [{
				name : '销售业绩',
				type : 'pie',
				radius : '55%',
				center : ['50%', '60%'],
				data : [{
					value : 335,
					name : '直接访问'
				}, {
					value : 310,
					name : '邮件营销'
				}, {
					value : 234,
					name : '联盟广告'
				}, {
					value : 135,
					name : '视频广告'
				}, {
					value : 1548,
					name : '搜索引擎'
				}],
				itemStyle : {
					emphasis : {
						shadowBlur : 10,
						shadowOffsetX : 0,
						shadowColor : 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		};
		// 使用刚指定的配置项和数据显示图表。
		personalSelling.setOption(personalSellingOption);
		function personalSellingFunction() {
			var oper = $("#customerType").val();
			var deptPersonal = $("#deptPersonal").val();
			if (oper == null) {
				oper = 'thisMonth';
			}
			
			$.ajax({
				url : host + 'rankSaleChart.do',
				type : 'post',
				data : {
						"deptId" : "${users.dept.deptId}",
						"date" : oper
				},
				dataType : 'json',
			success : function(data) {
					var ret = data;
					if (ret.data != null) {
					personalSelling.setOption({
						legend : {
							data : ret.emp
						},
						series : [{
							// 根据名字对应到相应的系列
							data : ret.data
						}]
					});
				} else {
					personalSelling.setOption({
						title : {
							subtext : '暂无数据',
						},
						legend : {
							data : [""]
						},
						series : [{
							// 根据名字对应到相应的系列
							data : [{}]
						}]
					});
				}
					
					
				}
			});
			
			
		}

</script>
</html>